<template>
    <div class="store">
        <div class="divtop">
            <TopBar :text="text"/>
        </div>
        <div class="shopList">
            <van-tabs @click="onClick">
                <van-tab title="商品">
                    <div class="stop" @click="$router.push({ path: '/Detail', query: { id:item.proid }})" v-for="(item,index) in guanzhu" :key="index">
                        <div class="stopbox">
                            <div class="imged">
                                <img :src="item.img1" alt="">
                            </div>
                        </div>
                        <div class="left">
                            <div class="text">{{ item.desc | filText }}</div>
                            <div class="pic">￥{{ item.originprice }}</div>
                            <div><span>找相似</span> <span>降价通知</span></div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="店铺">
                    <div class="box">
                        <div class="imgs">
                            <img src="https://res.suning.cn/project/myfavorite/css/client/images/empty.png" alt="">
                        </div>
                        <div class="tex">您暂时没有关注感兴趣的店铺哦</div>
                        <div class="btn">
                            <button @click="$router.push('/home/hompage')">去逛逛</button>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <div class="shoplist">
            <TuiJian/>
        </div>
    </div>
</template>

<script>
import TopBar from '@/components/TopBar.vue'
import { Toast } from 'vant'
import TuiJian from '@/components/TuiJian.vue'
export default {
    data() {
        return {
            guanzhu: [],
            active: null,
            text:'我的关注'
        }
    },
    components: {
        TuiJian,
        TopBar
    },
    mounted() {
        this.guanzhu = this.$store.state.focusData;
        console.log(this.guanzhu);
    },
    methods: {
        onClick(name, title) {
            Toast(title);
        },
    },
    filters: {
        filText(ts) {
            if (ts.length > 22) {
                return ts.substr(0, 29) + "..."
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.store{
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    .divtop{
        width: 100%;
        height: 0.45rem;
        .topbox{
            width: 95%;
            margin: 0.05rem 2.5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .img{
                width: 0.555rem;
                height: 0.45rem;
                display: flex;
                img{
                    width: 60%;
                    height: 60%;
                }
            }
            .my{
                font-size: 0.17rem;
            }
            .div{
                font-size: 0.15rem;
                box-sizing: border-box;
                height: 100%;
            }
        }
    }
    .shopList{
        font-size: 0.15rem;
        margin-bottom: 0.16rem;
        .box{
            display: flex;
            flex-direction:column ;
            align-items: center;
            justify-content: center;
            background-color: #f2f2f2;
            .imgs{
                width: 1.3rem;
                height: 1.3rem;
                margin-top: 2.01rem;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .btn{
                button{
                    width: 1.52rem;
                    height: 0.385rem;
                    background-color: #ffffff;
                    border-radius: 0.4rem;
                    margin: 0.25rem 0.1rem 0.55rem 0.1rem;
                    border: 1px solid #d3d3d3;
                }
            }
        }
        .van-tabs{
            .van-tabs__content{
                .van-tab__pane{
                    background-color: #f2f2f2;
                    width: 100%;
                    box-sizing: border-box;
                    .stop {
                        width: 95%;
                        display: flex;
                        justify-content: space-between;
                        margin: 2.5% 2.5%;
                        background-color: #ffffff;
                        border-radius: 0.11rem;
                        margin-top: 0.02rem;
                            .stopbox {
                                border-radius: 0.11rem;
                                background-color: #ffffff;
                                height: 1.41rem;
                                .imged {
                                    margin: 2.5% 2.5%;
                                    width: 1.11rem;
                                    height: 1.11rem;
                    
                                    img {
                                        width: 1.11rem;
                                        height: 1.11rem;
                                    }
                    
                                }
                            }
                            .left{
                                margin-left: 0.12rem;
                                .text{
                                    margin: 0.12rem;
                                    font-size: 0.14rem;
                                }
                                .left{
                                    color: #ff5a00;
                                }
                                div{
                                    span{
                                        display: inline-block;
                                        border: 1px solid #555454;
                                        border-radius: 0.12rem;
                                        padding: 0.02rem 0.04rem;
                                    }
                                }
                            }
                        }
                }
            }
        }
    }
}
</style>